<template>
  <div style="padding: 0 17px">
    <Breadcrumb/>
    <div v-if="!isEdit" >
      <div style="display: flex;margin-top: 20px;">
        <span style="min-width: 200px;margin-right: 15px">
          <el-button type="primary" style="margin-right: 15px" @click="addItem">新增
          </el-button>
          <OrganizationTree
              style="width: 200px;"
              @change="load"
              v-model="selectedOrganizationId"
              @tree-select-changed="treeSelectChanged"
          />
        </span>
        <el-input v-model="searchClientName" placeholder="单位名称"
                  style="width: 180px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
        <el-input v-model="searchDeviceName" placeholder="设施名称"
                  style="width: 180px;height: 33px;margin-right: 15px;font-size: 13px;" clearable></el-input>
        <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;"
                   @click="load">搜索
        </el-button>
        <el-button type="success" style="" @click="importData">导入</el-button>
        <el-button type="success" style="" @click="exportData">导出</el-button>
      </div>
      <el-table :data="tableData" :row-style="{ height: '77px' }" border style="width: calc(100vw - 240px);margin-top: 20px;height: 70vh;color: #909399;font-size: 15px;">
        <el-table-column prop="id" label="ID" width="100"/>
        <el-table-column prop="clientId" label="单位编码" width="100"/>
        <el-table-column prop="clientName" label="单位名称" width="250"/>
        <el-table-column prop="id" label="设施编码" width="100"/>
        <el-table-column prop="deviceName" label="设施名称" width="300"/>
        <el-table-column prop="stateChangeTime" label="状态变化时间" width="200"/>
        <el-table-column prop="setPosition" label="设置部位" width="150"/>
        <el-table-column prop="treatmentState" label="处理状态" width="100"/>
        <el-table-column prop="facilityState" label="设施状态" width="150"/>
        <el-table-column prop="organizationName" label="组织" width="450"/>
        <el-table-column align="center" label="操作" fixed="right" width="200">
          <template v-slot="scope">
            <el-button type="primary" size="small" icon="Edit" @click="editItem(scope.row)">编辑</el-button>
            <el-button v-if="this.userInformation.role === 1" type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :background="true"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <div v-else>
      <div style="display: flex; justify-content: center">
        <el-tabs type="border-card" class="editTabs">
          <el-tab-pane label="基本信息">
            <el-form label-position="top" :inline="true" align="center" style="width: 650px;" :rules="rules" ref="currentData" :model="currentData" class="form-inline">
              <el-form-item label="设施所属单位名称" prop="clientId">
                <el-select v-model="currentData.clientId" filterable placeholder="选择单位名称">
                  <el-option
                      v-for="item in clientOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="设施名称" prop="deviceName">
                <el-input v-model="currentData.deviceName" placeholder="设施名称" clearable />
              </el-form-item>
              <el-form-item label="设置部位" prop="setPosition">
                <el-input v-model="currentData.setPosition" placeholder="设置部位" clearable />
              </el-form-item>
              <el-form-item label="设施系统形式" prop="systemForm">
                <el-input v-model="currentData.systemForm" placeholder="设施系统形式" clearable />
              </el-form-item>
              <el-form-item label="投入使用时间">
                <el-date-picker
                    class="el-date-picker"
                    v-model="currentData.serviceTime"
                    type="datetime"
                    placeholder="投入使用时间"
                    clearable
                    style="width: var(--el-form-width)"
                    value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
              <el-form-item label="生产单位名称">
                <el-input v-model="currentData.productionName" placeholder="生产单位名称" clearable />
              </el-form-item>
              <el-form-item label="生产单位电话">
                <el-input v-model="currentData.productionTel" placeholder="生产单位电话" clearable />
              </el-form-item>
              <el-form-item label="维修保养单位名称">
                <el-input v-model="currentData.maintenanceName" placeholder="维修保养单位名称" clearable />
              </el-form-item>
              <el-form-item label="维修保养单位电话">
                <el-input v-model="currentData.maintenanceTel" placeholder="维修保养单位电话" clearable />
              </el-form-item>
              <el-form-item label="探测器数量">
                <el-input-number :min="0" v-model="currentData.detectorNum" placeholder="探测器数量" clearable />
              </el-form-item>
              <el-form-item label="控制器数量">
                <el-input-number :min="0" v-model="currentData.controllerNum" placeholder="控制器数量" clearable />
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="消防信息">
            <el-form label-position="top" :inline="true" align="center" style="width: 1300px;" :model="currentData" class="form-inline">
              <el-form-item label="手动报警按钮数量">
                <el-input-number :min="0" v-model="currentData.manualAlButNum" placeholder="手动报警按钮数量" clearable />
              </el-form-item>
              <el-form-item label="消防电气控制数量">
                <el-input-number :min="0" v-model="currentData.elecFireConNum" placeholder="消防电气控制数量" clearable />
              </el-form-item>
              <el-form-item label="市政给水管网形式">
                <el-select v-model="currentData.waterSupNetForm" filterable placeholder="市政给水管网形式">
                  <el-option
                      v-for="item in waterSupNetFormOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="市政进水管数量">
                <el-input-number :min="0" v-model="currentData.waterSupNum" placeholder="市政进水管数量" clearable />
              </el-form-item>
              <el-form-item label="市政进水管管径">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.inPipeDiamet" placeholder="市政进水管管径" clearable />
              </el-form-item>
              <el-form-item label="消防水池容量">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.firePoolCapacity" placeholder="消防水池容量" clearable />
              </el-form-item>
              <el-form-item label="消防水池位置">
                <el-input v-model="currentData.firePoolPosition" placeholder="消防水池位置" clearable />
              </el-form-item>
              <el-form-item label="消防水箱容量">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.fireTankCapacity" placeholder="消防水箱容量" clearable />
              </el-form-item>
              <el-form-item label="消防水箱位置">
                <el-input v-model="currentData.fireTankPosition" placeholder="消防水箱位置" clearable />
              </el-form-item>
              <el-form-item label="消防泵位置">
                <el-input v-model="currentData.firePumpPosition" placeholder="消防泵位置" clearable />
              </el-form-item>
              <el-form-item label="消防泵流量">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.firePumpFlow" placeholder="消防泵流量" clearable />
              </el-form-item>
              <el-form-item label="消防泵扬程">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.firePumpLift" placeholder="消防泵扬程" clearable />
              </el-form-item>
              <el-form-item label="其他水源供水量">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.otherWaterSup" placeholder="其他水源供水量" clearable />
              </el-form-item>
              <el-form-item label="其他水源情况">
                <el-input v-model="currentData.otherWaterCondition" placeholder="其他水源情况" clearable />
              </el-form-item>
              <el-form-item label="室外消火栓官网形式">
                <el-select v-model="currentData.outdoorHydForm" filterable placeholder="室外消火栓官网形式">
                  <el-option
                      v-for="item in hydFormOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="室外消火栓管径">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.outdoorHydDiamet" placeholder="室外消火栓管径" clearable />
              </el-form-item>
              <el-form-item label="室内消火栓官网形式">
                <el-select v-model="currentData.indoorHydForm" filterable placeholder="室内消火栓官网形式">
                  <el-option
                      v-for="item in hydFormOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="室内消火栓数量">
                <el-input-number :min="0" v-model="currentData.indoorHydNum" placeholder="室内消火栓数量" clearable />
              </el-form-item>
              <el-form-item label="室内消火栓管径">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.indoorHydDiamet" placeholder="室内消火栓管径" clearable />
              </el-form-item>
              <el-form-item label="水泵接合器数量">
                <el-input-number :min="0" v-model="currentData.siaConNum" placeholder="水泵接合器数量" clearable />
              </el-form-item>
              <el-form-item label="水泵接合器位置">
                <el-input v-model="currentData.siaConPosition" placeholder="水泵接合器位置" clearable />
              </el-form-item>
              <el-form-item label="稳压泵数量">
                <el-input-number :min="0" v-model="currentData.stabPrePumpNum" placeholder="稳压泵数量" clearable />
              </el-form-item>
              <el-form-item label="稳压泵流量">
                <el-input-number :min="0" :precision="1" :step="0.1"
                                 v-model="currentData.stabPrePumpFlow"
                                 placeholder="稳压泵流量"
                                 clearable />
              </el-form-item>
              <el-form-item label="稳压泵扬程">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.stabPrePumpLift" placeholder="稳压泵扬程" clearable />
              </el-form-item>
              <el-form-item label="气压罐容量">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.airPreTankCapacity" placeholder="气压罐容量" clearable />
              </el-form-item>
              <el-form-item label="稳压泵数量">
                <el-input-number :min="0" v-model="currentData.fireHoseNum" placeholder="稳压泵数量" clearable />
              </el-form-item>
              <el-form-item label="报警阀数量">
                <el-input-number :min="0" v-model="currentData.alarmValNum" placeholder="报警阀数量" clearable />
              </el-form-item>
              <el-form-item label="报警阀位置">
                <el-input v-model="currentData.alarmValPosition" placeholder="报警阀位置" clearable />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="消防信息">
            <el-form label-position="top" :inline="true" align="center" style="width: 1300px;" :model="currentData" class="form-inline">
              <el-form-item label="水流指示灯数量">
                <el-input-number :min="0" v-model="currentData.waterLightNum" placeholder="水流指示灯数量" clearable />
              </el-form-item>
              <el-form-item label="水流指示灯位置">
                <el-input v-model="currentData.waterLightPosition" placeholder="水流指示灯位置" clearable />
              </el-form-item>
              <el-form-item label="喷头数量">
                <el-input-number :min="0" v-model="currentData.showNozzNum" placeholder="喷头数量" clearable />
              </el-form-item>
              <el-form-item label="减压阀数量">
                <el-input-number :min="0" v-model="currentData.reliValNum" placeholder="减压阀数量" clearable />
              </el-form-item>
              <el-form-item label="减压阀位置">
                <el-input v-model="currentData.reliValPosition" placeholder="减压阀位置" clearable />
              </el-form-item>
              <el-form-item label="竖向分区数量">
                <el-input-number :min="0" v-model="currentData.verPartNum" placeholder="竖向分区数量" clearable />
              </el-form-item>
              <el-form-item label="喷淋泵数量">
                <el-input-number :min="0" v-model="currentData.sprayPumpNum" placeholder="喷淋泵数量" clearable />
              </el-form-item>
              <el-form-item label="喷淋泵流量">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.sprayPumpFlow" placeholder="喷淋泵流量" clearable />
              </el-form-item>
              <el-form-item label="喷淋泵扬程">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.sprayPumpLift" placeholder="喷淋泵扬程" clearable />
              </el-form-item>
              <el-form-item label="喷淋泵位置">
                <el-input v-model="currentData.sprayPosition" placeholder="喷淋泵位置" clearable />
              </el-form-item>
              <el-form-item label="雨淋阀数量">
                <el-input-number :min="0" v-model="currentData.delugeValNum" placeholder="雨淋阀数量" clearable />
              </el-form-item>
              <el-form-item label="雨淋阀位置">
                <el-input v-model="currentData.delugeValPosition" placeholder="雨淋阀位置" clearable />
              </el-form-item>
              <el-form-item label="水雾喷头数量">
                <el-input-number :min="0" v-model="currentData.sprayNozzNum" placeholder="水雾喷头数量" clearable />
              </el-form-item>
              <el-form-item label="水雾喷头位置">
                <el-input v-model="currentData.sprayNozzPosition" placeholder="水雾喷头位置" clearable />
              </el-form-item>
              <el-form-item label="防护区数量">
                <el-input-number :min="0" v-model="currentData.protZoneNum" placeholder="防护区数量" clearable />
              </el-form-item>
              <el-form-item label="防护区容积">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.protZoneCapacity" placeholder="防护区容积" clearable />
              </el-form-item>
              <el-form-item label="防护区部位名称">
                <el-input v-model="currentData.protZoneName" placeholder="防护区部位名称" clearable />
              </el-form-item>
              <el-form-item label="防护区位置">
                <el-input v-model="currentData.protZonePosition" placeholder="防护区位置" clearable />
              </el-form-item>
              <el-form-item label="灭火剂类型">
                <el-input v-model="currentData.extingAgentType" placeholder="灭火剂类型" clearable />
              </el-form-item>
              <el-form-item label="手动控制装置位置">
                <el-input v-model="currentData.manuConPosition" placeholder="手动控制装置位置" clearable />
              </el-form-item>
              <el-form-item label="设施动作方式">
                <el-input v-model="currentData.faciOperaMode" placeholder="设施动作方式" clearable />
              </el-form-item>
              <el-form-item label="瓶库位置">
                <el-input v-model="currentData.vaultLocation" placeholder="瓶库位置" clearable />
              </el-form-item>
              <el-form-item label="钢瓶数量">
                <el-input-number :min="0" v-model="currentData.steelCylinNum" placeholder="钢瓶数量" clearable />
              </el-form-item>
              <el-form-item label="钢瓶容积">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.steelCylinCapacity" placeholder="钢瓶容积" clearable />
              </el-form-item>
              <el-form-item label="钢瓶间距">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.steelCylinSpace" placeholder="钢瓶间距" clearable />
              </el-form-item>
              <el-form-item label="泡沫泵数量">
                <el-input-number :min="0" v-model="currentData.frothPumpNum" placeholder="泡沫泵数量" clearable />
              </el-form-item>
              <el-form-item label="泡沫泵流量">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.frothPumpFlow" placeholder="泡沫泵流量" clearable />
              </el-form-item>
              <el-form-item label="泡沫泵扬程">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.frothPumpLift" placeholder="泡沫泵扬程" clearable />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="消防信息">
            <el-form label-position="top" :inline="true" align="center" style="width: 1300px;" :model="currentData" class="form-inline">
              <el-form-item label="泡沫数值">
                <el-input-number :min="0" v-model="currentData.frothNum" placeholder="泡沫数值" clearable />
              </el-form-item>
              <el-form-item label="干粉储罐位置">
                <el-input v-model="currentData.dryPowdTankPosition" placeholder="干粉储罐位置" clearable />
              </el-form-item>
              <el-form-item label="防烟分区数量">
                <el-input-number :min="0" v-model="currentData.smokeBayNum" placeholder="防烟分区数量" clearable />
              </el-form-item>
              <el-form-item label="防烟分区位置">
                <el-input v-model="currentData.smokeBayPosition" placeholder="防烟分区位置" clearable />
              </el-form-item>
              <el-form-item label="风机数量">
                <el-input-number :min="0" v-model="currentData.draughtFanNum" placeholder="风机数量" clearable />
              </el-form-item>
              <el-form-item label="风机安装位置">
                <el-input v-model="currentData.draughtFanPosition" placeholder="风机安装位置" clearable />
              </el-form-item>
              <el-form-item label="风机风量">
                <el-input-number :min="0" :precision="1" :step="0.1" v-model="currentData.draughtFanFlow" placeholder="风机风量" clearable />
              </el-form-item>
              <el-form-item label="风口设置部位">
                <el-input v-model="currentData.tuyereLocation" placeholder="风口设置部位" clearable />
              </el-form-item>
              <el-form-item label="排烟防火阀数量">
                <el-input-number :min="0" v-model="currentData.smokeFireValNum" placeholder="排烟防火阀数量" clearable />
              </el-form-item>
              <el-form-item label="排烟阀数量">
                <el-input-number :min="0" v-model="currentData.smokeDampNum" placeholder="排烟阀数量" clearable />
              </el-form-item>
              <el-form-item label="防火阀数量">
                <el-input-number :min="0" v-model="currentData.fireDampNum" placeholder="防火阀数量" clearable />
              </el-form-item>
              <el-form-item label="正压送风阀数量">
                <el-input v-model="currentData.presSupCylNum" placeholder="正压送风阀数量" clearable />
              </el-form-item>
              <el-form-item label="防火门数量">
                <el-input-number :min="0" v-model="currentData.fireDoorNum" placeholder="防火门数量" clearable />
              </el-form-item>
              <el-form-item label="防火卷帘数量">
                <el-input-number :min="0" v-model="currentData.fireShutNum" placeholder="防火卷帘数量" clearable />
              </el-form-item>
              <el-form-item label="防火门设置部位">
                <el-input v-model="currentData.fireDoorSetPosition" placeholder="防火门设置部位" clearable />
              </el-form-item>
              <el-form-item label="防火卷帘门设置部位">
                <el-input v-model="currentData.fireShutSetPosition" placeholder="防火卷帘门设置部位" clearable />
              </el-form-item>
              <el-form-item label="扩音器功率">
                <el-input v-model="currentData.amplifPower" placeholder="扩音器功率" clearable />
              </el-form-item>
              <el-form-item label="备用扩音器功率">
                <el-input v-model="currentData.standAmplifPower" placeholder="备用扩音器功率" clearable />
              </el-form-item>
              <el-form-item label="扬声器数量">
                <el-input-number :min="0" v-model="currentData.speakNum" placeholder="扬声器数量" clearable />
              </el-form-item>
              <el-form-item label="广播分区数量">
                <el-input-number :min="0" v-model="currentData.broadPartNum" placeholder="广播分区数量" clearable />
              </el-form-item>
              <el-form-item label="广播分区设置部位">
                <el-input v-model="currentData.broadPartSetPosition" placeholder="广播分区设置部位" clearable />
              </el-form-item>
              <el-form-item label="消防专用电话数量">
                <el-input-number :min="0" v-model="currentData.fireTelNum" placeholder="消防专用电话数量" clearable />
              </el-form-item>
              <el-form-item label="消防专用电话位置">
                <el-input v-model="currentData.fireTelPosition" placeholder="消防专用电话位置" clearable />
              </el-form-item>
              <el-form-item label="应急照明疏散数量">
                <el-input-number :min="0"  v-model="currentData.emergLightEvacNum" placeholder="应急照明疏散数量" clearable />
              </el-form-item>
              <el-form-item label="消防电源设置部位">
                <el-input v-model="currentData.firePowerSetPosition" placeholder="消防电源设置部位" clearable />
              </el-form-item>
              <el-form-item label="备用电源形式">
                <el-input v-model="currentData.backupPowerForm" placeholder="备用电源形式" clearable />
              </el-form-item>
              <el-form-item label="灭火器设置部位">
                <el-input v-model="currentData.fireExtLocation" placeholder="灭火器设置部位" clearable />
              </el-form-item>
              <el-form-item label="灭火器配置类型">
                <el-input v-model="currentData.fireExtConfType" placeholder="灭火器配置类型" clearable />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="消防信息">
            <el-form label-position="top" :inline="true" align="center" style="width: 975px;" :model="currentData" class="form-inline">
              <el-form-item label="是否为独立配电柜">
                <el-select v-model="currentData.isUsePdc" filterable placeholder="是否为独立配电柜">
                  <el-option
                      v-for="item in isUsePdcOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="灭火器生产日期">
                <el-date-picker
                    class="el-date-picker"
                    v-model="currentData.fireExtManuTime"
                    type="datetime"
                    placeholder="灭火器生产日期"
                    clearable
                    style="width: var(--el-form-width)"
                    value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
              <el-form-item label="灭火器更换药剂日期">
                <el-date-picker
                    class="el-date-picker"
                    v-model="currentData.fireExtChangeTime"
                    type="datetime"
                    placeholder="灭火器更换药剂日期"
                    clearable
                    style="width: var(--el-form-width)"
                    value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-form-item>
              <el-form-item label="灭火器数量">
                <el-input-number :min="0" v-model="currentData.fireExtNum" placeholder="灭火器数量" clearable />
              </el-form-item>
              <el-form-item label="火灾自动报警系统图">
                {{ (currentData.fireAlaSysDiagram ? currentData.fireAlaSysDiagram.split(',').map(url =>{return { url } }) : []).length }}张
                <el-button @click="initPhotoList('fireAlaSysDiagram')">查看</el-button>
              </el-form-item>
              <el-form-item label="消防给水系统平面图">
                {{ (currentData.fireWaterSysPlan ? currentData.fireWaterSysPlan.split(',').map(url =>{return { url } }) : []).length }}张
                <el-button @click="initPhotoList('fireWaterSysPlan')">查看</el-button>
                <!--                <el-input v-model="currentData.fireWaterSysPlan" placeholder="消防给水系统平面图" clearable />-->
              </el-form-item>
              <el-form-item label="室外消火栓平面图">
                {{ (currentData.outdoorHydPlan ? currentData.outdoorHydPlan.split(',').map(url =>{return { url } }) : []).length }}张
                <el-button @click="initPhotoList('outdoorHydPlan')">查看</el-button>
                <!--                <el-input v-model="currentData.outdoorHydPlan" placeholder="室外消火栓平面图" clearable />-->
              </el-form-item>
              <el-form-item label="室内消火栓平面图">
                {{ (currentData.indoorHydPlan ? currentData.indoorHydPlan.split(',').map(url =>{return { url } }) : []).length }}张
                <el-button @click="initPhotoList('indoorHydPlan')">查看</el-button>
                <!--                <el-input v-model="currentData.indoorHydPlan" placeholder="室内消火栓平面图" clearable />-->
              </el-form-item>
              <el-form-item label="自动喷水灭火系统图">
                {{ (currentData.autSprSysDiag ? currentData.autSprSysDiag.split(',').map(url =>{return { url } }) : []).length }}张
                <el-button @click="initPhotoList('autSprSysDiag')">查看</el-button>
                <!--                <el-input v-model="currentData.autSprSysDiag" placeholder="自动喷水灭火系统图" clearable />-->
              </el-form-item>
              <el-form-item label="水喷雾灭火系统图">
                {{ (currentData.waterFireSysDiag ? currentData.waterFireSysDiag.split(',').map(url =>{return { url } }) : []).length }}张
                <el-button @click="initPhotoList('waterFireSysDiag')">查看</el-button>
                <!--                <el-input v-model="currentData.waterFireSysDiag" placeholder="水喷雾灭火系统图" clearable />-->
              </el-form-item>
              <el-form-item label="气体灭火系统图">
                {{ (currentData.gasFireSysDiag ? currentData.gasFireSysDiag.split(',').map(url =>{return { url } }) : []).length }}张
                <el-button @click="initPhotoList('gasFireSysDiag')">查看</el-button>
                <!--                <el-input v-model="currentData.gasFireSysDiag" placeholder="气体灭火系统图" clearable />-->
              </el-form-item>
              <el-form-item label="泡沫灭火系统图">
                {{ (currentData.foamFireSysDiag ? currentData.foamFireSysDiag.split(',').map(url =>{return { url } }) : []).length }}张
                <el-button @click="initPhotoList('foamFireSysDiag')">查看</el-button>
                <!--                <el-input v-model="currentData.foamFireSysDiag" placeholder="泡沫灭火系统图" clearable />-->
              </el-form-item>
              <el-form-item label="干粉灭火系统图">
                {{ (currentData.dryPowderFireSysDiag ? currentData.dryPowderFireSysDiag.split(',').map(url =>{return { url } }) : []).length }}张
                <el-button @click="initPhotoList('dryPowderFireSysDiag')">查看</el-button>
                <!--                <el-input v-model="currentData.dryPowderFireSysDiag" placeholder="干粉灭火系统图" clearable />-->
              </el-form-item>
              <el-form-item label="防烟排烟系统图">
                {{ (currentData.smokeConSysDiag ? currentData.smokeConSysDiag.split(',').map(url =>{return { url } }) : []).length }}张
                <el-button @click="initPhotoList('smokeConSysDiag')">查看</el-button>
                <!--                <el-input v-model="currentData.smokeConSysDiag" placeholder="防烟排烟系统图" clearable />-->
              </el-form-item>
              <el-form-item label="消防应急广播系统图">
                {{ (currentData.fireBroadSysDiag ? currentData.fireBroadSysDiag.split(',').map(url =>{return { url } }) : []).length }}张
                <el-button @click="initPhotoList('fireBroadSysDiag')">查看</el-button>
                <!--                <el-input v-model="currentData.fireBroadSysDiag" placeholder="消防应急广播系统图" clearable />-->
              </el-form-item>
              <el-form-item label="应急照明疏散指示图">
                {{ (currentData.emergLightEvaInstr ? currentData.emergLightEvaInstr.split(',').map(url =>{return { url } }) : []).length }}张
                <el-button @click="initPhotoList('emergLightEvaInstr')">查看</el-button>
                <!--                <el-input v-model="currentData.emergLightEvaInstr" placeholder="应急照明疏散指示图" clearable />-->
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div style="margin-top: 10px; text-align: center;">
        <el-button type="primary" @click="onSubmit('currentData')">提交保存</el-button>
        <el-button @click="back()">返回</el-button>
      </div>
    </div>
  </div>
  <el-dialog title="上传图片" :close-on-click-modal="false" v-model="photoDialog">
    <el-upload
        :on-error="photoHandleError"
        :action="'/api/files/upload'"
        :on-success="photoUpload"
        list-type="picture-card"
        :file-list="photoList"
    >
      <template #tip>
        <div class="el-upload__tip">
          {{ photoType() }}文件应小于{{ fileSizeLimit() }}
        </div>
      </template>
      <el-icon><Plus /></el-icon>
      <template #file="{ file }" style="display:flex;text-align: center;justify-content: center">
        <div>
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
                  <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                  >
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
        </div>
      </template>
    </el-upload>
  </el-dialog>
  <el-dialog v-model="dialogVisible" style="width: 500px;height:500px;">
    <img width="500" w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
  <el-dialog title="导入" v-model="dialogImportVisible" width="520px">
    <el-form label-position="right" label-width="100px">
      <el-form-item label="模板下载:" padding-top:10px>
        <el-button type="primary" size="small" style="" @click="exportTemplate">消防设施</el-button>
      </el-form-item>
      <el-form-item label="文件" padding-top:-20px>
        <el-upload :headers="headers"
                           :multiple="false"
                   :on-success="onUploadSuccess"
                   :on-error="onUploadError"
                   :action="serverIp+'/equipment-device/importData'"
                   class="upload-demo">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogImportVisible = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb.vue";
import request from "@/utils/request.js";
import OrganizationTree from "@/components/OrganizationTree.vue";
import {fileSizeLimit, photoType} from "@/assets/globalJS.js";
import {Plus} from "@element-plus/icons-vue";
import {serverIp} from "../../../public/static/config"

export default {
  name: "EquipmentFacilities",
  components: {Plus, OrganizationTree, Breadcrumb},
  data() {
    return{
      serverIp,
                headers: {
                    token:  JSON.parse(localStorage.getItem('user')).token,
                },
      dialogImportVisible: false,
      // 设备列表
      equipmentOptions:[],
      equipmentCurrentPage:1,
      equipmentPageSize:10,
      equipmentTotal:0,
      searchEquipmentInputStoreId:"",
      clientOptions:[],
      photoList:[], // 图片列表
      photoDialog:false,// 图片弹窗
      dialogImageUrl:"",
      dialogVisible:false,
      currentData:{},
      currentField:"",
      isEdit:false,
      userInformation:JSON.parse(localStorage.getItem("user")),
      selectedOrganizationId:JSON.parse(localStorage.getItem("user")).organization,
      searchClientName: "",
      searchDeviceName: "",
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      waterSupNetFormOptions:[{
        value:0,
        label:"树状网"
      },{
        value:1,
        label:"环状网"
      }],
      hydFormOptions:[{
        value:0,
        label:"环状管网消火栓系统"
      },{
        value:1,
        label:"枝状管网消火栓系统"
      }],
      isUsePdcOptions:[{
        value:0,
        label:"否"
      },{
        value:1,
        label:"是"
      }],
      rules: {
        clientId: [
          {required: true, message: '请选择单位名称', trigger: 'blur'},
        ],
        deviceName: [
          {required: true, message: '请输入设施名称', trigger: 'blur'},
        ],
        setPosition: [
          {required: true, message: '请输入设置部位', trigger: 'blur'},
        ],
        systemForm: [
          {required: true, message: '请输入设施系统形式', trigger: 'blur'},
        ],
      },
    }
  },
  created() {
    this.load()
    this.getClientOptions()
  },
  methods: {
    importData() {
      this.dialogImportVisible = true;
    },
    onUploadSuccess() {
      this.$message.success('上传成功');
      this.dialogImportVisible = false;
      location.reload();
    },
    onUploadError(){
      this.$message.error('上传失败');
    },
    // 模板下载
    exportTemplate() {
      window.location.href = '../xlsx/equipmentDevice.xlsx'
    },
    exportData() {
      let level = JSON.parse(localStorage.getItem("user")).level
      if (this.currentData.level !== undefined) {
        level = this.currentData.level
      }
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      window.open(serverIp + '/equipment-device/export?deviceName=' + this.searchDeviceName + "&clientName=" + this.searchClientName +
              "&level=" + level + "&organizationId=" + this.selectedOrganizationId + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds);
    },
    fileSizeLimit() {
      return fileSizeLimit
    },
    photoType() {
      return photoType
    },
    addItem(){
      this.currentData={}
      this.isEdit=true
    },
    // 获取要绑定的设备列表
    getEquipmentOptions() {
      let level = JSON.parse(localStorage.getItem("user")).level
      let organizationId = JSON.parse(localStorage.getItem("user")).organization
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      request.get("/equipment-input-store/page?pageNum="+this.equipmentCurrentPage+"&pageSize="+this.equipmentPageSize+"&equipmentId="+this.searchEquipmentInputStoreId+"&organizationId="+organizationId+"&level="+level+"&isAllClient="+isAllClient+"&clientIds="+clientIds).then(res => {
        for (let key in res.data) {
          if (key === "record") {
            this.equipmentOptions = res.data[key];
          }
          if (key === "total") {
            this.equipmentTotal = res.data[key];
          }
        }
      })
    },
    getClientOptions(){
      let level = JSON.parse(localStorage.getItem("user")).level
      let organizationId = JSON.parse(localStorage.getItem("user")).organization
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      request.get("/client/listbyName?name="+"&organizationId="+organizationId+"&level="+level+"&isAllClient="+isAllClient+"&clientIds="+clientIds).then(res=>{
        this.clientOptions=res.data
      })
    },
    onSubmit(val){
      this.$refs[val].validate((valid) => {
        if (valid) {
          request.post("/equipment-device/edit", this.currentData).then(res => {
            console.log(res.data)
            if (res.data) {
              this.$message({
                message: "成功",
                type: "success"
              })
              this.isEdit = false
              this.load()
              this.reset("form")
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    // 搜索
    load(){
      let level =  JSON.parse(localStorage.getItem("user")).level
      if (this.currentData?.level !== undefined) {
        level = this.currentData.level
      }
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      request.get("/equipment-device/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize+"&deviceName=" + this.searchDeviceName + "&clientName=" + this.searchClientName +
          "&level="+level+"&organizationId="+this.selectedOrganizationId+"&isAllClient="+isAllClient+"&clientIds="+clientIds).then(res=>{
        this.tableData = res.data.record
      })
    },
    editItem(item){
      Object.assign(this.currentData,item)
      this.isEdit=true
    },
    back(){
      this.$confirm('操作将不会保存是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.isEdit=false
        this.currentData={}
      });
    },
    // 删除确定弹窗
    deleteItem(scope) {
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete("/equipment-device/delete/" + scope).then(res => {
          if (res.code === '200') {
            this.$message.success("成功")
            this.load()
          } else {
            this.$message.error(res.msg)
          }
        })
      });
    },
    handleSizeChange(pageSize) {   // 改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {  // 改变当前页码触发
      this.currentPage = pageNum
      this.load()
    },
    treeSelectChanged(data, node) {
      this.currentData = data
    },
    // 关闭下拉框的选项
    closeSelect(){
      this.$refs["selectRef1"].blur();
    },
    // 选择绑定设备
    selectedEquipment(option){
      this.currentData.equipmentInputStoreId=option.id
    },
    innerHandleCurrentChange(pageNum) {  // 改变当前页码触发
      this.equipmentCurrentPage = pageNum
      this.getEquipmentOptions()
    },
    innerHandleSizeChange(pageSize) {   // 改变当前每页的个数触发
      this.equipmentPageSize = pageSize
      this.getEquipmentOptions()
    },
    initPhotoList(item) {
      this.currentField=item
      this.photoList = this.currentData[item] ? this.currentData[item].split(',').map(url =>{return {url}}) : [];
      this.photoDialog=true
    },
    photoUpload(response){
      if (this.photoList.length===0){
        this.currentData[this.currentField]=`/api/file/download${response}`
      }else {
        this.currentData[this.currentField]=this.currentData[this.currentField]+`,/api/file/download${response}`
      }
      this.initPhotoList(this.currentField)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file) {
      const index = this.photoList.indexOf(file);
      if (index !== -1) {
        const images = this.currentData[this.currentField].split(',');
        images.splice(index, 1); // 删除选中的图片
        this.currentData[this.currentField] = images.join(','); // 更新 pointMap 字符串
        this.photoList.splice(index, 1);
      }
    },
    photoHandleError(){
      this.$message.error("上传文件大小请勿超过"+fileSizeLimit)
    }
  }
}
</script>

<style scoped>
:deep(.el-table th .cell)  {
  font-weight: 700
}

.editTabs{
  background-color: #041953;
  min-width: 700px;
  width: calc(100vw - 700px);
}

:deep(.el-tabs__item) {
  color: #ffffff !important;
}

:deep(.el-tabs__item.is-active) {
  color: #1890ff !important;
}


.el-tab-pane {
  height: 570px;
  overflow-y: auto;
}

.el-select {
  width: var(--el-form-width);
}

.el-input {
  width: var(--el-form-width);
}
.el-input-number{
  width: var(--el-form-width);
}

.el-tab-pane{
  display: flex;
  justify-content: center
}
</style>
